<script setup>
import {onMounted, ref} from "vue";
import {getCourse, getSemester, addScore, getCourseByName} from "@/hook/scoreHook.js";
import {getUserByName} from "@/hook/userHook.js";
import {useScoreStore} from "@/store/userStore.js";
import {useToast} from "vue-toastification";


let props = defineProps({
  scores:[]
})
let semester=ref([])
let courses=ref([])
onMounted(async () => {
  semester.value = await getSemester()
  courses.value = await getCourse()
})

let new_score = ref({
  'username':'',
  'studentId':0,
  'coursename':'',
  'courseId':0,
  'score':0,
})

let addNewScore = (async () => {
  try{
    new_score.value.courseId = (await getCourseByName(new_score.value.coursename)).id
    new_score.value.studentId = (await getUserByName(new_score.value.username)).id
    await addScore(new_score.value)
    await useScoreStore().updateScores(1, 7)
  }catch(error){
    useToast().error("成绩录入失败",error);
  }
})

</script>

<template>
  <form @submit.prevent="addNewScore">
  <div class="collapse bg-base-100 border-base-300 border">
    <input type="checkbox" />
    <div class="collapse-title font-semibold">成绩录入</div>
    <div class="collapse-content text-sm flex ">
      <fieldset class="fieldset flex-1">
        <legend class="fieldset-legend">学号</legend>
        <input class="input join-item" required placeholder="学号" minlength="3" maxlength="20" v-model="new_score.username" />
      </fieldset>
      <fieldset class="fieldset flex-1">
        <legend class="fieldset-legend">课程</legend>
        <select class="select" v-model="new_score.coursename" required>
          <option v-for="course in courses" :key="course.id">{{ course.name }}</option>
        </select>
      </fieldset>
      <fieldset class="fieldset flex-1">
        <legend class="fieldset-legend">成绩</legend>
        <input class="input join-item validator" placeholder="成绩" required
               v-model.number="new_score.score" maxlength="5" type="text"
               pattern="^(?:100(?:\.0{0,2})?|(?!100$)[1-9]?\d(?:\.\d{0,2})?|0(?:\.\d{1,2})?)$"/>
        <p class="validator-hint">
          成绩不合法
          <br/>请输入0~100的数字，可以有两位小数
        </p>
        <button class="btn join-item rounded-full" type="submit">录入成绩</button>
      </fieldset>

    </div>
  </div>
  </form>
</template>

<style scoped>

</style>